<template>
  <page-header-wrapper :title="false">
    <a-card title="已放弃客户列表">
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务名称">
                <a-input v-model="queryParam['filter[tm_name]']" placeholder="业务名称"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="客户姓名">
                <a-input v-model="queryParam['filter[customer_name]']" placeholder="输入客户姓名"/>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="联系电话">
                  <a-input v-model="queryParam['filter[phone]']" placeholder="输入联系电话"/>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="contract_content">
        <s-table
          ref="table"
          bordered
          :row-key="(record) => record.abandon_id"
          :columns="customerColumns"
          :data="abandonData"
        >
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              重置
            </a-button>
          </div>
          <template slot="tm_name" slot-scope="text, record">
            <div v-if="type == 'pt'">
              {{ record.pt_name }}
            </div>
            <div v-else-if="type == 'tm'">
              {{ text }}
            </div>
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button type="danger" size="small" @click="retake(record.customer_id)">重新纳妾</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      title="重新纳妾"
      v-model="visible"
      @ok="submitRetake"
    >
      <a-form-model
        ref="form"
        :model="customerForm"
      >
        <a-form-model-item label="客户姓名" :style="{ marginBottom: '0' }">
          <a-input type="text" placeholder="" v-model="customerForm.customer_name" />
        </a-form-model-item>
        <!--          <a-form-model-item label="意向业务" :style="{ marginBottom: '0' }">-->
        <!--            <a-checkbox-group :value="customerForm.intentions" @change="onChange">-->
        <!--              <a-checkbox v-for="(item, index) in intentionAOption" :key="index" :value="index">-->
        <!--                {{item}}-->
        <!--              </a-checkbox>-->
        <!--            </a-checkbox-group>-->
        <!--          </a-form-model-item>-->
        <a-form-model-item label="预约时间" :style="{ marginBottom: '0' }">
          <a-date-picker v-model="customerForm.yy_time" format="YYYY-MM-DD" placeholder="选择预约时间" @change="onChange" />
        </a-form-model-item>
        <a-form-model-item label="进展内容">
          <a-textarea v-model="customerForm.notes"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import storage from 'store'
  import { STable } from '@/components'
  import { abandon, getRetake, postRetake } from '@/api/customer'
  import col from '@/columns/customer'
  const customerColumns = col.abandon

  export default {
    components: {
      STable
    },
    name: 'AbandonCustomer',
    data () {
      return {
        customerColumns,
        abandonData: parameters => {
          return abandon(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        advanced: false,
        queryParam: {},
        visible: false,
        customerId: '',
        intentionOption: {},
        intentionAOption: {},
        customerForm: {},
        int: ['20', '30'],
        type: storage.get('Group_Type')
      }
    },
    methods: {
      retake (id) {
        const app = this
        app.customerId = id
        getRetake(app.customerId).then(res => {
          if (res.status === 0) {
            app.intentionAOption = res.result.intention_a_opts
            app.customerForm = res.result.customer
            app.visible = true
          }
        })
      },
      submitRetake () {
        const app = this
        const data = {}
        const form = app.customerForm
        data['customer[customer_name]'] = form['customer_name']
        // data['customer[intentions]'] = form['intentions']
        data['customer_track[yy_time]'] = form['yy_time']
        data['customer_track[notes]'] = form['notes']
        postRetake(this.customerId, data).then(res => {
          if (res.status === 0) {
            app.$refs.table.refresh()
            app.visible = false
          } else {
            app.$warning({
              title: res.msg
            })
            return false
          }
        })
      },
      onChange (date, dateString) {
        this.customerForm.yy_time = dateString
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
      },
      handleReset (clearFilters) {
        clearFilters()
      }
    }
  }
</script>

<style scoped>

</style>
